import { useEffect, useState } from 'react'
import NavigateBar from '../../components/navigatebar/NavigateBar'
import Masks from './components/Masks'
import { Form, Input, Selector, Button, } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { saveCustomerData, updateCustomerData } from '../../store/CustomerSlice'
import type { CustomerData } from '../../type/CustomerState'

//性别&有无
const gender = [
  { label: '男', value: '男' },
  { label: '女', value: '女' },
]
const options = [
  { label: '有', value: '有', },
  { label: '无', value: '无', },
]
//样式
const selectorStyles = {
  '--border-radius': '100rem',
  '--border': 'solid transparent 1rem',
  '--checked-border': 'solid var(--adm-color-primary) 1rem',
  '--padding': '8rem 24rem',
} as React.CSSProperties;
const inp = { width: '100%', height: '30rem', fontSize: '14rem', border: '1rem solid #ccc', borderRadius: '5rem', padding: '3rem' }


function Customer() {
  //有无
  const [showFields, setShowFields] = useState({
    dinner: false,
    accommodation: false,
    car: false,
  });
  const handleSelectorChange = (field: string, value: string[]) => {
    setShowFields(prev => ({
      ...prev,
      [field]: value.includes('有'),
    }));
  };

  //导航&mask
  const [showMask, setShowMask] = useState<boolean>(false);
  const navigate = useNavigate();
  const handleBackClick = () => {
    setShowMask(true);
  };
  const handleCancel = () => {
    setShowMask(false);
  };
  const handleConfirm = () => {
    navigate('/reception/info', { state: { new: false } })
  };

  //保存&编辑
  const { id } = useParams();
  const dispatch = useDispatch();
  const customerList = useSelector((state: any) => state.customer.customer);
  const customer = customerList.find((item: CustomerData) => item.id == id);
  const onFinish = (values: CustomerData) => {
    if (id) {
      dispatch(updateCustomerData({ id, data: values }));
    } else {
      dispatch(saveCustomerData({ ...values, id: Date.now().toString() }));
    }
   navigate('/reception/info', { state: { new: false } })
  }

  useEffect(() => {
    if (!id || !customer) return;
    setShowFields({
      dinner: customer.dinner.includes('有'),
      accommodation: customer.accommodation.includes('有'),
      car: customer.car.includes('有'),
    });
  }, [id, customer])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div className='customer ' style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: "50rem", zIndex: 999, backgroundColor: '#FFFFFF' }}>
        <NavigateBar
          hasBack={true}
          title='重要客户喜好禁忌'
          backClick={handleBackClick}
        />
      </div>

      <Form
        layout='horizontal'
        style={{ padding: '16rem', flex: "1", overflowY: 'auto', paddingTop: "50rem", paddingBottom: "60rem" }}
        onFinish={onFinish}
        initialValues={id ? customer : {}}
        footer={
          <Button block type='submit' color='primary' size='large' style={{ marginBottom: "2%", position: "fixed", right: "0", bottom: '0', left: '0', width: '100%', height: '50rem' }} >
            保存
          </Button>
        }>

        <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入' />
        </Form.Item>

        <Form.Item name='gender' label='性别' rules={[{ required: true, message: '不能为空' }]} >
          <Selector
            style={selectorStyles}
            showCheckMark={false}
            options={gender}
          />
        </Form.Item>


        <Form.Item
          name='position'
          label='职位'
        >
          <Input onChange={console.log} placeholder='请输入' />
        </Form.Item>

        <Form.Item
          name='tel'
          label='联系方式'
        >
          <Input onChange={console.log} placeholder='请输入' />
        </Form.Item>

        <Form.Item
          name='dinner'
          label='用餐喜好&禁忌'
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Selector
            style={selectorStyles}
            showCheckMark={false}
            options={options}
            onChange={(value) => handleSelectorChange('dinner', value)}
          />
        </Form.Item>
        {showFields.dinner && (
          <Form.Item
            name="dinnerDetail"
            rules={[{ required: true, message: '请输入具体喜好/禁忌' }]}
          >
            <Input className="dinner" placeholder="请输入用餐具体喜好/禁忌" style={inp} />
          </Form.Item>
        )}

        <Form.Item
          name='accommodation'
          label='住宿喜好&禁忌'
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Selector
            style={selectorStyles}
            showCheckMark={false}
            options={options}
            onChange={(value) => handleSelectorChange('accommodation', value)}
          />
        </Form.Item>
        {showFields.accommodation && (
          <Form.Item
            name="accommodationDetail"
            rules={[{ required: true, message: '请输入具体喜好/禁忌' }]}
          >
            <Input className="accommodation" placeholder="请输入住宿具体喜好/禁忌" style={inp} />
          </Form.Item>
        )}


        <Form.Item
          name='car'
          label='用车喜好&禁忌'
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Selector
            style={selectorStyles}
            showCheckMark={false}
            options={options}
            onChange={(value) => handleSelectorChange('car', value)}
          />
        </Form.Item>
        {showFields.car && (
          <Form.Item
            name="carDetail"
            rules={[{ required: true, message: '请输入具体喜好/禁忌' }]}
          >
            <Input className="car" placeholder="请输入用车具体喜好/禁忌" style={inp} />
          </Form.Item>
        )}

        <Form.Item
          name='remark'
          label='备注'
        >
          <Input onChange={console.log} placeholder='请输入' />
        </Form.Item>

      </Form >

      <Masks
        visible={showMask}
        title="退出编辑"
        message="退出此次编辑，当前内容将不会被保存，确定退出编辑吗？"
        onCancel={handleCancel}
        onConfirm={handleConfirm}
      />
    </div>
  )
}
export default Customer
